Angular - Route Guards and Strategy

Angular is a popular front-end framework made by Google. Like other popular front-end frameworks, it uses a component-based architecture to structure apps.

In this article, we’ll look at how to add routing to our Angular app.

Preventing Unauthorized Access

We can access query parameters with Angular.

To do that, we run:

ng generate guard nav

to create our guard.

Then we have:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { NavGuard } from './nav.guard';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [
  {
    path: 'first-component', component: FirstComponent, canActivate: [NavGuard],

},
  { path: 'second-component', component: SecondComponent },
  { path: '', redirectTo: '/first-component', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

to add the guard with the `canActivate` property.

Then in `nav.guard.ts` , we can write something like:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class NavGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    return true
  }
}

to add the canActivate method to the guard class.

Implementing CanActivate means the route will only be loaded if canActivate returns true .

Link Parameters Array

The routerLink prop can be set to an array.

This way, we can add URL parameters to the route path.

For example, we can write:

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component/:id', component: SecondComponent },
  { path: '', redirectTo: '/first-component', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.componen.html :

<nav>
  <ul>
    <li><a routerLink="/first-component" routerLinkActive="active">First
        Component</a></li>
    <li><a [routerLink]="['/second-component', 1]" routerLinkActive="active">Second
        Component</a></li>
  </ul>
</nav>
<router-outlet></router-outlet>

We added the :id URL parameter to the /second-component path.

And we changed the routerLink to an array in the 2nd link.

Now when we click on the 2nd link, we go to /second-component/1 .

Routing Strategy

We can change the routing strategy to render URLs in different formats.

We should pick one early and stick with it so that the URL formats won’t change.

One strategy is the HashLocationStrategy to add a hash to the URL between the base URL and the path.

To use this strategy, we write:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component/:id', component: SecondComponent },
  { path: '', redirectTo: '/first-component', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }

in app-routing.module.ts .

We added the useHash property and set it to true .

Now our URLs should be something like http://localhost:4200/#/first-component .

If we leave out the useHash option or set it to false , then Angular render paths without the hash sign.

Conclusion

We can add guards to prevent unauthorized access to routes.

Also, we can change routing strategy to what we want.